<template>
  <div>
    <van-nav-bar fixed left-arrow @click-left="$router.back()" />
    <MySearch :city="city" />
    <van-dropdown-menu>
      <van-dropdown-item title="区域" ref="item1">
        <van-picker
          show-toolbar
          title=""
          :columns="newarea"
          @confirm="onConfirm1"
          ref="pic1"
        />
        <div>
          <van-button type="default" @click="$refs.item1.toggle()">
            取消
          </van-button>
          <van-button type="primary" @click="clk1"> 确认 </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="方式" ref="item2">
        <van-picker
          show-toolbar
          title=""
          :columns="newrentType"
          @confirm="onConfirm2"
          ref="pic2"
        />
        <div>
          <van-button type="default" @click="$refs.item2.toggle()">
            取消
          </van-button>
          <van-button type="primary" @click="clk2"> 确认 </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="租金" ref="item3">
        <van-picker
          show-toolbar
          title=""
          :columns="newprice"
          @confirm="onConfirm3"
          ref="pic3"
        />
        <div>
          <van-button type="default" @click="$refs.item3.toggle()">
            取消
          </van-button>
          <van-button type="primary" @click="clk3"> 确认 </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" @open="show = true"> </van-dropdown-item>
    </van-dropdown-menu>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '70%' }"
    >
      <div class="popup_zu">
        <dl>
          <dt>户型</dt>
          <dd>
            <span v-for="item in roomType" @click="addHour(item)" :class="{actire:item.checked}" :key="item.value">{{item.label}}</span>
          </dd>
        </dl>
        <dl>
          <dt>朝向</dt>
          <dd>
            <span v-for="item in oriented" @click="addHour(item)" :class="{actire:item.checked}" :key="item.value">{{item.label}}</span>
          </dd>
        </dl>
        <dl>
          <dt>楼层</dt>
          <dd>
            <span v-for="item in floor" @click="addHour(item)" :class="{actire:item.checked}" :key="item.value">{{item.label}}</span>
          </dd>
        </dl>
        <dl>
          <dt>房屋亮点</dt>
          <dd>
            <span v-for="item in characteristic" @click="addHour(item)" :class="{actire:item.checked}" :key="item.value">{{item.label}}</span>
          </dd>
        </dl>
        <div class="btnbottom">
          <van-button type="default" @click="removemore">
            取消
          </van-button>
          <van-button type="primary" @click="clk4"> 确认 </van-button>
        </div>
      </div>
    </van-popup>
    <PublicCard v-for="item in list" :key="item.id" :item="item"></PublicCard>
  </div>
</template>

<script>
import PublicCard from '@/components/PublicCard'
import { getCondition, getHours } from '@/api/home'
import { getMyCity } from '@/utils/city'
import MySearch from '@/components/MySearch.vue'
export default {
  name: 'LookingRoom',
  components: { MySearch, PublicCard },
  data () {
    return {
      city: '',
      area: [], // 区域
      characteristic: [], // 房屋亮点
      floor: [], // 楼层
      oriented: [], // 朝向
      price: [], // 价格
      rentType: [], // 方式
      roomType: [], // 户型
      subway: [], // 地铁
      newarea: [], //, //处理的区域数据
      newrentType: [], // 处理的方式数据
      newprice: [], // 处理的租金数据
      id: JSON.parse(localStorage.getItem('hk-city')).value, // 当前定位城市id
      list: [], // 房源信息
      more: [], // 复合查询
      show: false
    }
  },
  async created () {
    // 获取当前定位城市
    const data = await getMyCity()
    this.city = data.label
    const { body } = await getCondition(
      JSON.parse(localStorage.getItem('hk-city')).value
    )
    const res = await getHours({ id: this.id })
    this.list = res.body.list
    console.log(body)
    // 处理数据
    this.area = body.area
    this.characteristic = body.characteristic.map(item => ({ ...item, checked: false }))
    this.floor = body.floor.map(item => ({ ...item, checked: false }))
    this.oriented = body.oriented.map(item => ({ ...item, checked: false }))
    this.price = body.price
    this.rentType = body.rentType
    this.roomType = body.roomType.map(item => ({ ...item, checked: false }))
    this.subway = body.subway
    this.newarea = this.getMyList
    this.newrentType = this.getRentType
    this.newprice = this.getPrice
  },
  computed: {
    getMyList () {
      // 区域
      const newarea = this.chellList(this.area)
      // 地铁
      const newsubway = this.chellList(this.subway)
      return [...newarea, ...newsubway]
    },
    // 方式
    getRentType () {
      return this.rentType.map(item => item.label)
    },
    // 租金
    getPrice () {
      return this.price.map(item => item.label)
    }
  },
  methods: {
    // 区域请求
    async onConfirm1 (value, index) {
      // 区域房源
      if (index[0] === 0 && index[1] !== 0) {
        const area = this.newarea[index[0]].children[index[1]].value
        const res = await getHours({
          id: this.id,
          area
        })
        this.list = res.body.list
        this.$toast.success('筛选成功')
      } else if (index[0] === 1 && index[1] !== 0) {
        // 地铁房源
        const subway = this.newarea[index[0]].children[index[1]].value
        const res = await getHours({
          id: this.id,
          subway
        })
        this.list = res.body.list
        this.$toast.success('筛选成功')
      }
    },
    // 方式请求
    async onConfirm2 (value, index) {
      if (index !== 0) {
        const res = await getHours({
          if: this.id,
          rentType: this.rentType[index].value
        })
        this.list = res.body.list
        this.$toast.success('筛选成功')
      }
    },
    // 租金请求
    async onConfirm3 (value, index) {
      if (index[0] !== 0) {
        const res = await getHours({
          id: this.id,
          price: this.price[index].value
        })
        this.list = res.body.list
        this.$toast.success('筛选成功')
      }
    },
    // 区域确认
    clk1 () {
      this.$refs.pic1.confirm()
      this.$refs.item1.toggle()
    },
    // 方式确认
    clk2 () {
      this.$refs.pic2.confirm()
      this.$refs.item2.toggle()
    },
    // 租金确认
    clk3 () {
      this.$refs.pic3.confirm()
      this.$refs.item3.toggle()
    },
    // 筛选确认
    async clk4 () {
      console.log(this.more)
      if (!this.more.length) return this.$toast.fail('请选择配置')
      const more = this.more.map(item => item.value).join(',')
      console.log(more)
      const res = await getHours({
        id: this.id,
        more
      })
      this.list = res.body.list
      this.show = false
      this.$toast.success('筛选成功')
      this.more = []
    },
    // 取消筛选
    removemore () {
      this.floor.forEach(item => (item.checked = false))
      this.characteristic.forEach(item => (item.checked = false))
      this.oriented.forEach(item => (item.checked = false))
      this.roomType.forEach(item => (item.checked = false))
    },
    addHour (item) {
      // 判断选择了哪些配置
      item.checked = !item.checked
      if (!this.more.includes(item)) {
        this.more.push(item)
      } else {
        this.more = this.more.filter(item => item.checked)
      }
    },
    // 处理数据方法
    chellList (arr) {
      return [arr].map(item => {
        return {
          text: item.label,
          value: item.value,
          children: item.children.map(item => {
            if (!item.children) {
              return {
                text: item.label,
                value: item.value,
                children: [{ text: '' }]
              }
            } else {
              return {
                text: item.label,
                value: item.value,
                children: item.children.map(item => {
                  return {
                    text: item.label
                  }
                })
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.actire{
  border: 1px solid #21b97a;
    color: #21b97a;
    background-color: #defaef;
}
  /deep/ .van-picker__toolbar {
    display: none;
  }
  .search {
    top: 8px;
    .search_info {
      .search_info_left {
        margin-left: 30px;
      }
    }
  }
  .van-dropdown-menu {
    margin-top: 46px;
    position: sticky;
    top: 46px;
    z-index: 999;
  }
  .van-button--normal {
    width: 50%;
  }
  .popup_zu {
    padding-top: 20px;
    .btnbottom{
      position: sticky;
      bottom: 0;
      z-index: 999;
    }
    dl{
      padding: 0 20px;
    dt {
      margin: 20px 0;
    }
    dd {
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 14px;
      margin-left: 30px;
      span {
        display: inline-block;
        height: 32px;
        width: 70px;
        margin: 0 18px 15px 0;
        border: 1px solid #ddd;
        border-radius: 3px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        color: #888;
      }
    }
    }
  }
</style>
